<template>
  <BasicDrawer 
    v-bind="$attrs" 
    @register="register" 
    title="导出JSON" 
    width="750px" 
    showFooter
  >
    <MyAceEditor ref="editor" mode="json" v-model:content="content" :style="aceEditorStyle" :readOnly="true"/>
    <template #footer>
      <Button @click="handleCopy">复制JSON</Button>
      <Button @click="handleCopy" type="primary">导出JSON</Button>
    </template>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { Button } from 'ant-design-vue'
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import MyAceEditor from '/@/components/My/MyAceEditor.vue';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const emit = defineEmits(['register', 'success']);
const aceEditorStyle = ref<String>("width: 100%; height: calc(100vh - 150px)")
const content = ref()
const [register, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  content.value = data.content
  console.log('content', data.content)
  setDrawerProps({  })
});

const handleCopy = () => {
  const { clipboardRef, isSuccessRef } = useCopyToClipboard(content.value);
  clipboardRef.value = content.value;
  if (unref(isSuccessRef)) {
    createMessage.success('复制成功');
  }
}
</script>
